<template>
  <div id="index-list">
    <div class="drop-down-list">
      <p @click="setPanelOpend">
        <span class="index">{{curIndexName}}</span>
        <span :class="[isOpend?'up':'down','list-tip']"></span>
      </p>
      <div class="drop-box" v-show="isOpend">
        <div></div>
        <div class="drop-inner">
          <ul>
            <li v-for="item in indexList" @click="confirmIndex(item)" :class="{active:curSelectId === item.id}"><span
              class="name">{{item.name}} </span><span class="tip">({{item.tip}})</span>
            </li>
          </ul>
          <!--<div>-->
            <!--<div class="right-tip" @click="confirmIndex"></div>-->
            <!--<div class="error-tip" @click="cancelIndex"></div>-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <IndexList/>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import IndexList from './views/IndexList'
  export default {
    name: 'IndexContainer',
    data () {
      return {
        indexList: [
          {
            id: 0,
            type:'01',
            name: "延时指数",
            tip: "5分钟级",
            jamIndex:'delayindex'
          },
          {
            id: 1,
            type:'02',
            name: "拥堵里程比例",
            tip: "5分钟级",
            jamIndex:'jamradio'
          },
          {
            id: 2,
            type:'03',
            name: "时空拥堵指数",
            tip: "小时级",
            jamIndex:'timespacejam'
          }
        ],
        curSelectId: 0, //当前选中
        curIndexId: 0,  //当前确认
        isOpend: false,   //指数选择面板状态
      }
    },
    mounted(){

    },
    components: {
      IndexList,
    },
    computed: {
      ...mapGetters(['cur_city', 'cur_district','cur_index_type']),
      curIndexName: function () {
        return this.indexList[this.curIndexId].name;
      }
    },
    methods: {
      ...mapMutations(['updateCurCity', 'updateCurDistrict','updateIndexType']),
      setCurIndex(item){
        this.curSelectId = item.id;
      },
      setPanelOpend(){
        this.isOpend = !this.isOpend;
      },
      confirmIndex(item){
        this.curSelectId = item.id;
        this.curIndexId = this.curSelectId;
        this.isOpend = false;
        this.updateIndexType(this.indexList[this.curIndexId].type);
      },
      cancelIndex(){
        this.curSelectId = this.curIndexId;
        this.isOpend = false;
      }

    },
    watch: {
    }
  }
</script>

<style scoped lang="scss">
  @import "../common/common.scss";

  #index-list {
    float: left;
    width: $index-width;
    height: 100%;
    background-color: $bg-normal;
    /*opacity: 0.6;*/
    @include backdropBlur;
    .drop-down-list {
      position: relative;
      p {
        @include clearfix;
        .index {
          width: calc(100% - 18px);
          height: 38px;
          font-size: 18px;
          color: #35495a;
          font-weight: bold;
          line-height: 38px;
          background-color: $bg-highlight;
          float: left;
          text-align: center;
        }
        .list-tip {
          width: 18px;
          height: 38px;
          float: left;
          background-color: rgba(197, 255, 0, 0.45);
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
          &.down {
            background-image: url("../../static/images/arrow-list-down.png");
          }
          &.up {
            background-image: url("../../static/images/arrow-list-up.png");
          }

        }
      }
      .drop-box {
        position: absolute;
        top: 38px;
        left: 0px;
        z-index: 10;
        background-color: $bg-highlight;
        box-shadow:0px 0px 20px $bg-highlight inset;
        box-sizing: border-box;
        width: 100%;
        padding: 1px;
        .drop-inner {
          background-color: $bg-normal;
          ul {
            li {
              height: 38px;
              line-height: 38px;
              font-size: 16px;
              text-indent: 10px;
              background-color: rgba(197, 255, 0, 0.4);
              /*border-bottom: 1px solid $bg-highlight;*/
              cursor: pointer;
              color: #acdd06;
              transition: opacity ease-in .3s;
              /*&:first-child{
                box-shadow:0px 0px 20px $bg-highlight inset;
              }*/
              &:hover {
                /*background-color: rgba(197, 255, 0, 0.55 );*/
                background-color: rgba(197, 255, 0, 0.42);
                transition: opacity ease-in .3s;
              }
              &.active {
                background-color: $bg-highlight;
                /*border-top: 1px solid rgba(82, 110, 0, 0.79);*/
                box-shadow:  0 4px 5px -3px rgba(84, 114, 0, 0.81) inset;
                .name {
                  color: #253232;
                  font-weight: bold;
                }
              }
              .tip {
                font-size: 12px;
                float: right;
                margin-right: 5px;
              }
            }
          }
          div {
            display: flex;
            div {
              vertical-align: middle;
              height: 34px;
              box-sizing: border-box;
              cursor: pointer;
              &.right-tip {
                flex-grow: 1;
                background: rgba(197, 255, 0, 0.6) url("../../static/images/confirm/right-icon.png") no-repeat center;
                &:hover {
                  opacity: 0.8;
                  transition: opacity ease-in .2s;
                }
              }
              &.error-tip {
                flex-grow: 1;
                border-left: 1px solid $bg-highlight;
                background: rgba(197, 255, 0, 0.6) url("../../static/images/confirm/error-icon.png") no-repeat center;
                &:hover {
                  opacity: 0.8;
                  transition: opacity ease-in .2s;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
